import React from 'react'
import ReactEcharts from 'echarts-for-react';
import styles from './index.less'
import { Empty } from 'antd';
import type { Params } from '../Summarize';
import { echartOption } from '@/utils/echartsUtils';

interface ItemStarCount {
  itemStarCount: Params[]
}
export default function Item(props: ItemStarCount) {
  const { itemStarCount } = props;

  const res1 = itemStarCount?.map((item) => {
    const { currentStars } = item;
    const color = () => {
      if (currentStars == 3) {
        return 'green'
      } else if (currentStars == 2) {
        return 'yellow'
      } else if (currentStars == 1) {
        return 'pink'
      } else {
        return
      }
    }
    return { value: item.itemCount, name: `获得${item.currentStars}星`, color: color() }
  }).filter((item: any) => {
    return item?.name != '获得0星'
  })

  const res2: any = itemStarCount?.map((item) => {
    return item.itemCount
  }).reduce((total1, v) => {
    return total1! + v!
  }, 0)

  return (
    <div style={{ flex: 1, position: "relative", width: '50%' }}>
      <div style={{ fontSize: '18px', fontWeight: 'bold', left: "50%", transform: 'translateX(-50%)', position: 'absolute' }}>条目三星率</div>

      {
        !res2 || res2?.length == 0 ? <Empty description={'还没有已完成的条目哦'} style={{ position: "relative", top: "50%", transform: 'translateY(-50%)' }} image={Empty.PRESENTED_IMAGE_SIMPLE} /> : <>
          <ReactEcharts notMerge option={echartOption(res1)} style={{ margin: 'auto', minHeight: '400px' }} />
          <div className={styles.title_font} >已完成{res2}个条目</div>
        </>
      }
    </div>
  )
}




